<template>
	<view>
		<view v-show="receptionistMan11 == username">
			<!-- <input class="cus-input" v-model="receptionistMan11" type="text" value="" placeholder="点击输入客户搜索"
				maxlength="10" @input="doSearch(e)" /> -->
			<text>{{receptionistMan11}}</text>
		</view>
		<view v-show="receptionistId11 == id">
			<text>{{receptionistId11}}</text>
		</view>
		<view class="visit-wrap">
			<view class="visit-nav">
				<!-- 时间筛选 -->
				<view @click="DatePicker('range')">
					<image class="shijian" src="/static/image/sanjiaoxing-l@2x.png"></image>
					<view class="nav-time">
						<text>时间</text>
					</view>
				</view>
				<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'开始'"
					:end-text="'结束'" :show-seconds="true" @confirm="ed" @cancel="ed" format="yyyy-mm-dd" />

				<!-- 客户级别筛选 -->
				<!-- <view class="right">
					<image class="xialakuang" src="/static/image/sanjiaoxing-l@2x.png"></image>
					<view class="nav-item">
						<text>客户级别</text>
						<picker class="header" mode='selector' :range="levelList" @change="bindPickerlevelChange"
							:value="Level" :range-key="'levelName'" :key="Level">
							<text>{{levelName}}</text>
							<text>{{LevelName_[levelNa].levelName}}</text>
						</picker>
					</view>
				</view> -->

				<!-- 性别筛选 -->
				<view class="right">
					<image class="xialakuang" src="/static/image/sanjiaoxing-l@2x.png"></image>
					<view class="nav-item">
						<picker class="header" v-for="(item,index) in sexList" mode="selector" :range="item.content"
							:value="index" @change="pickerChange" @click="pickerIndex=index" :key="index">
							<text>{{item.text}}</text>
						</picker>
					</view>
				</view>

				<!-- 产品意向筛选 -->
				<view class="right">
					<image class="xialakuang" src="/static/image/sanjiaoxing-l@2x.png"></image>
					<view class="nav-item">
						<picker class="header" mode='selector' :range="shortList" @change="bindPickerChange"
							:value="Short" :range-key="'sardName'" :key="Short">
							<text>{{sardName}}</text>
						</picker>
					</view>
				</view>

				<!-- 更多筛选 -->
				<view class="right">
					<view class="cebianlan" @tap="open">
						<image class="shaixuan" src="/static/image/shaixuan@2x.png"></image>
						<text>更多筛选</text>
					</view>
					<view class="drawer-box" style="width: 100%; height: 100%; position: relative; z-index: 999;">
						<hj-dragabledrawer :options="options" ref="dragBox">
							<view class="my-d-content">
								<view class="mater-status-size">
									<text class="checkbox-title">筛选条件</text>
									<radio-group @change="radioChange">
										<input class="cus-input" v-model="consultants11" type="text"
											placeholder="点击输入客户搜索" maxlength="10" @input="doSearch()" />
									</radio-group>
								</view>
								<view class="drawer-box-btn">
									<button type="default" class="d-b-reset" @tap="toclose">重置</button>
									<button type="default" class="d-b-submit" @tap="close">确认</button>
								</view>
							</view>
						</hj-dragabledrawer>
					</view>
				</view>
			</view>
			<mescroll-body ref="mescrollRef" bottom="100" @init="mescrollInit" @down="downCallback" :up="upOption"
				@up="upCallback">
				<!-- <meter-list :list="meters"></meter-list> -->
				<visiting-list :list="visitings"></visiting-list>
				<!-- <empty v-if="visitings.length==0" top="500" text="暂无委托记录"></empty> -->
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import hjDragabledrawer from "@/components/hj-dragabledrawer/hj-dragabledrawer.vue"; //这里修改下插件的相对路径
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	// import empty from '@/uni_modules/mescroll-uni/components/mescroll-empty/mescroll-empty.vue'
	let dragBox;

	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollMixin,
			MxDatePicker,
			hjDragabledrawer,
			// empty
		},

		data() {

			return {

				isDoRefresh: false,
				//筛选
				key: 0,
				options: {
					visible: false,
					rightMode: true,
					autoClose: true,
					pulldown: true,
					width: '',
					bg: '#EBEFF6',
				},
				// =筛选按钮
				labelName: '',
				labelDataList: 0,
				//客户
				id: '',
				consultants11: '',
				receptionistMan11: '',
				receptionistId11: '',

				// 列表数据
				visitings: [],
				curWord: '',
				SelPage: '',
				// 筛选为空
				upOption: {
					// auto: false,
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少
					empty: {
						use: true,
						icon: '/static/image/zanwushuju@2x.png',
						tip: '~ 无结果 ~', // 提示
					}
				},

				//时间
				showPicker: false,
				range: [{ //时间数组
					n: '',
					m: '',
				}],
				type: 'rangetime',
				value: [{}],
				newDate: '', //返回当前时间
				sTime: '', //开始时间
				eTime: '', //结束时间
				sDate: '',
				eDate: '',
				//时间结束

				//客户级别
				levelList: [],
				levelName: '客户级别',
				Level: 0,
				Levelchoose: [],

				//性别
				sexList: [{
					content: ['不限', '男', '女'],
					num: ['', '0', '1'],
					text: '性别',
				}],
				// 定义当前点击获取的下标，数组是从【0】开始的；
				pickerIndex: 0,
				gender: "",
				//性别结束

				// 意向产品
				shortList: [],
				sardName: '产品意向',
				Short: 0,
				shortchoose: [],

				visitingSearchList: [{
					consultId: "", //id
					consultants: "", //姓名
					genderText: "", //性别
					manLevelName: "", //客户级别
					planShortName: "", //意向产品
					planFullName: "",
					createdTime: "", //来访时间
					visitDate: "", //来访时间
					receptionistMan: "", //接待人员
				}],
				username: '',
			}
		},

		onLoad(option) {
			// this.getVisitList() //加载用户列表
			this.getLevel() //加载客户级别
			this.getShort() //加载意向产品
			this.getNewDate() //加载当前时间方法
			this.pushDate() //加载修改时间数组方法
			this.userName()
		},

		onShow() {
			this.canReset && this.mescroll.resetUpScroll()
			// this.canReset && this.mescroll.scrollTo(0,0)
			this.canReset && this.getShort()
			this.canReset = true
			// if(this.consultants11 == null){
			// 	this.canReset && this.mescroll.resetUpScroll()
			// }
			// console.log(this.consultants11)
		},

		onReady() {
			dragBox = this.$refs.dragBox;
		},

		methods: {

			onPullDownRefresh() {
				// console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},

			// 筛选
			open() {
				dragBox.open();
			},
			close(word) {
				dragBox.close();
				this.doSearch(word)
			},
			toclose(word) {
				this.consultants11 = ''
				this.doSearch(word)
			},
			// reset() {
			// 	for (let i in this.labelList) {
			// 		this.labelList[i].checked = false;
			// 	}
			// 	this.labelList[2].checked = true
			// 	this.labelDataList = 2
			// },
			change() {

			},
			// 筛选选择器
			labelBtn(name, index) {
				// console.log(name, index, "nameindex")
				this.labelName = name
				for (let i in this.labelList) {
					this.labelList[i].checked = false;
				}
				this.labelList[index].checked = true
			},
			radioChange: function(e) {
				this.labelDataList = e.detail.value
				// console.log("lab=" + this.labelDataList)
			},

			//获取数据
			// async getVisitList() {
			// 	let shortName = this.shortName
			// 	if (shortName == '不限' || shortName == '产品意向') {
			// 		shortName = ''
			// 		console.log("shortName======" + shortName)
			// 	}
			// 	let levelName = this.levelName
			// 	if (levelName == '不限' || levelName == '客户级别') {
			// 		levelName = ''
			// 		console.log("levelName======" + levelName)
			// 	}
			// 	console.log("sTime=====" + this.sTime + "eTime=====" + this.eTime)
			// 	const res = await this
			// 		.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
			// 			url: '/api-sale/control/consult/?planShortName=' + shortName + '&manLevelName=' +
			// 				levelName + '&visitDateEnd=' + this.eTime + '&visitDateStart=' + this.sTime +
			// 				'&gender=' + this.gender,
			// 			method: "get",
			// 		})
			// 	console.log(res.msg)
			// 	this.visitingSearchList = res.body.saleConsults.data
			// 	console.log(this.visitingSearchList)

			// },

			//时间筛选开始
			DatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					// console.log('value => ' + e.value);
					//原始的Date对象
					// console.log('date => ' + e.date);
					var times = this[this.type]
					var times = times.toString(); //把时间转换为String类型
					var sTime = times.slice(0, 10) //分割字符串得到开始时间
					var eTime = times.slice(11, 21) //分割字符串得到结束时间
					this.sTime = sTime
					this.eTime = eTime
					// console.log("sTime=" + sTime)
					// console.log("eTime=" + eTime)
					this.sDate = this.sTime
					this.eDate = this.eTime

					this.doSearch(e)
				}
			},
			getNewDate() { //获取当前时间并打印
				var yy = new Date().getFullYear();
				var mm = new Date().getMonth() + 1;
				var dd = new Date().getDate();
				this.newDate = yy + '/' + mm + '/' + dd;
				// console.log(this.newDate);	
			},
			pushDate() { //修改时间数组为当前时间
				// console.log(this.newDate),
				this.$set(this.range, 0, this.newDate)
				this.$set(this.range, 1, this.newDate)
				// console.log(this.range)
			},

			//客户级别
			bindPickerlevelChange(e) {
				this.levelNa = e.target.value
				this.levelName = this.levelList[this.levelNa].levelName.toString();
				this.doSearch(e)
				// getVisitList()
			},
			async getLevel() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-sale/config/manLevel/',
						method: "get",
					})
				this.levelList = res.body.saleManLevel.data;
				this.Levelchoose = res.body.saleManLevel.data;
				let levelList = res.body.saleManLevel.data;
				levelList.unshift({
					levelName: '不限',
				})
			},
			//客户结束

			//性别
			pickerChange: function(e) {
				this.sexList[this.pickerIndex].text = this.sexList[this.pickerIndex].content[e.detail.value];
				this.gender = this.sexList[this.pickerIndex].num[e.detail.value]
				// console.log("=========" + this.gender)
				this.doSearch(e)
			},
			// 性别结束

			// 意向产品
			bindPickerChange(e) { //获取picker里面的值
				this.order = e.target.value
				// console.log("order=" + this.order)
				this.shortName = this.shortList[this.order].shortName
				this.cardName = this.shortList[this.order].cardName
				this.sardName = this.shortList[this.order].sardName.toString();
				// console.log("sardName=" + this.sardName)
				this.doSearch(e)
			},
			async getShort() { //要到产品列表的数据
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-sale/config/plan/',
						method: "get",
					})
				// console.log(res.msg)
				this.shortList = res.body.salePlan.data;

				for (let i = 0; i < this.shortList.length; i++) {

					this.shortList[i].sardName = this.shortList[i].cardName + "-" + this.shortList[i].shortName

				}

				this.shortchoose = res.body.salePlan.data;
				// console.log("++++++++" + this.shortList)
				let shortList = res.body.salePlan.data;
				shortList.unshift({
					sardName: '不限',
				})
				// console.log(this.shortList)
			},

			onNavigationBarButtonTap() {
				uni.navigateTo({
					url: "/pages/visitingRegistration/visitingSearch"
				})
			},

			// 搜索
			doSearch(word) {
				// this.consultants11 = word.target.value
				// this.queryByInput()
				this.curWord = word
				this.visitings = []; // 先清空列表,显示加载进度
				this.mescroll.resetUpScroll();
			},

			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// 自写
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				// 第1种: 请求具体接口
				let shortName = this.shortName
				if (this.sardName == '不限' || this.sardName == '产品意向') {
					shortName = ''
					// console.log("shortName======" + shortName)
				}
				let levelName = this.levelName
				if (levelName == '不限' || levelName == '客户级别') {
					levelName = ''
					// console.log("levelName======" + levelName)
				}
				// console.log("sTime=====" + this.sTime + "eTime=====" + this.eTime)
				uni.request({
					url: 'http://pm.gxtimeloit.com:10030/api-sale/control/consult/?manLevelName=' + levelName +
						'&planShortName=' + shortName + '&gender=' + this
						.gender + '&visitDateEnd=' + this
						.eTime + '&visitDateStart=' + this.sTime +
						'&pageSize=' + pageSize + '&pageNumber=' +
						pageNum + '&consultants=' + this.consultants11 + '&receptionistMan=' + this
						.receptionistMan11 + '&receptionistId=' + this
						.receptionistId11,

					success: (data) => {
						// let test = data.data.body.saleConsults.data.list
						// co
						// test.forEach((item) => {
						// 	item.visitDate = item.visitDate.substring(0,10)
						// })
						// console.log("22222222222", data)
						if (data.data.body.saleConsults.data == null) {
							this.mescroll.endBySize(0, 0);
						} else {
							//接口返回的当前页数据列表 (数组)
							let curPageData = data.data.body.saleConsults.data;
							// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
							let curPageLen = curPageData.length;
							// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
							let totalPage = data.data.body.saleConsults.totalPage;
							// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
							let totalSize = data.data.body.saleConsults.totalSize;
							// 接口返回的是否有下一页 (true/false)
							let hasNext = false;
							// console.log(data.data.body.saleConsults.data)
							// console.log(data)
							// 请求成功,隐藏加载状态
							this.mescroll.endSuccess()
							if (page.num == 1) this.visitings = []; //如果是第一页需手动制空列表
							// this.meters = this.meters.concat(data.data.body.settlement.data); //追加新数据
							this.visitings = this.visitings.concat(curPageData);
							this.mescroll.endBySize(curPageLen, totalSize); //隐藏下拉刷新和上拉加载的状态
							for (let i in this.visitings) {
								if (this.visitings[i].visitDate) {
									let Trdate = new Date(this.visitings[i].visitDate);
									this.visitings[i].visitDate = this.visitings[i].visitDate.substring(0, 16)
								}
							}
						}
					},

					fail: () => {
						// 请求失败,隐藏加载状态
						this.mescroll.endErr()
					}
				})
			},
			//传接待人
			userName() {
				this.receptionistId11 = uni.getStorageSync('id');
				this.receptionistMan11 = uni.getStorageSync('loginName');
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #ebeff6;
	}

	.visit-wrap {
		align-items: center;
		justify-content: center;
	}

	.visit-nav {
		height: 88rpx;
		line-height: 60rpx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
		position: fixed;
		// margin-top: -86rpx;
		z-index: 999;
	}

	.nav-time {
		width: 118rpx;
		height: 48rpx;
		pointer-events: none;
		margin-top: -12rpx;
		font-size: 32rpx;
		// font-weight: bold;
	}

	.nav-item text {
		font-size: 32rpx;
		// font-weight: bold;
		margin: 18rpx;
		margin-left: -8rpx;
	}

	.shijian {
		float: right;
		width: 24rpx;
		height: 20rpx;
		/* border: 1rpx solid; */
		margin-top: 10rpx;
		margin-right: 16rpx;
	}

	.xialakuang {
		float: right;
		width: 24rpx;
		height: 20rpx;
		pointer-events: none;
		margin-right: 10rpx;
		margin-top: 24rpx;
	}

	.right {
		margin-left: -20rpx;
	}

	.header {
		width: 100%;
		height: 66rpx;
		line-height: 66rpx;
		float: right;
		font-size: 24rpx;
		margin-top: -44rpx;
		margin-left: 20rpx;
		// font-weight: bold;
	}

	.shaixuan {
		width: 28rpx;
		height: 32rpx;
		display: flex;
		/* position: absolute; */
		margin-top: 14rpx;
		margin-left: 16rpx;
		/* border: 1rpx solid; */
	}

	.cebianlan {
		width: 188rpx;
		display: flex;
		// border: 1rpx solid;
		border-left: 4rpx solid #F0F0F0;
	}

	.cebianlan text {
		font-size: 32rpx;
		// font-weight: bold;
		margin-left: 12rpx;
		color: #a3a3a3;
		/* border: 1rpx solid; */
	}

	/* 更多筛选 */

	.placeholder {
		margin-left: 23rpx;
	}

	.my-d-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.selectBox {
		background: #40B1F9 !important;
		color: #fff !important;
	}

	.checkbox-title {
		position: absolute !important;
		top: 20rpx;
		left: 20rpx;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 60rpx;
		// font-weight: bold;
		color: #666666;
	}

	.drawer-box-btn {
		position: absolute;
		bottom: 50rpx;
		display: flex;
		width: 428rpx;

		.d-b-reset {
			width: 152rpx;
			height: 54rpx;
			line-height: 54rpx;
			border-radius: 0;
			border: #109EF8 2rpx solid;
			margin-right: 0;
			color: #109EF8;
			font-size: 32rpx;
		}

		.d-b-submit {
			width: 270rpx;
			height: 54rpx;
			line-height: 54rpx;
			border-radius: 0;
			border: #109EF8 2rpx solid;
			background-color: #109EF8;
			margin-left: 0;
			color: #FFFFFF;
			font-size: 32rpx;
			// margin-left: 75rpx;
			margin-bottom: 130rpx;
		}
	}

	.mater-rooms-checkbox {
		display: flex;
		align-items: center;
		width: 17%;
		height: 100rpx;
	}

	.mater-houseType-checkbox {
		overflow: hidden;
		position: relative;
		width: 21%;
		height: 100rpx;
	}

	.mater-time-checkbox {
		width: 19.4%;
		/* height: 50px; */
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #808080;
	}

	.mater-dtime-checkbox {
		width: 27%;
		/* height: 50px; */
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #808080;
	}

	.mater-status-checkbox {
		width: 13%;
	}

	.cus-input {
		width: 478rpx;
		height: 60rpx;
		margin: 20rpx;
		margin-top: 134rpx;
		text-indent: 34rpx;
		border: 4rpx solid #808080;
		background-color: #FFFFFF;
		border-radius: 20px;
	}
</style>
